<template>
  <div class="video-detail">
    <!-- 左侧内容区域 -->
    <div class="vd-main">
      <div class="video-container">
        <div>
          <button class="no-btn font-16 font-bold mtop-10" @click="toVideo">
            <i class="el-icon-arrow-left"></i>{{ title }}
          </button>
        </div>
        <!-- 视频 -->
        <div class="video-wrap mtop-10">
          <video autoplay controls :src="urlInfo.url">
            您的浏览器不支持 video 标签。
          </video>
        </div>
        <!-- 视频信息 -->
        <div class="info-wrap">
          <div class="creator-info">
            <div class="img-wrap font-14" @click="toUorADetail()">
              <img :src="avatarUrl" alt="" />
              <span class="mleft-10 pointer">{{ nickName }}</span>
            </div>
            <div class="font-14" v-if="type === 'v'">
              <button class="sub-btn pointer">
                <i class="el-icon-plus">关注</i>
              </button>
            </div>
          </div>
          <div class="video-info">
            <div class="font-18 mtop-10 font-bold">
              {{ datail.title || datail.name }}
            </div>
            <div class="font-12 mtop-10" style="color: #cfcfcf">
              <span>发布时间：{{ datail.publishTime | dateFormat }}</span>
              <span class="mleft-20"
                >播放次数：{{
                  datail.playTiem || datail.playCount | countFormat
                }}</span
              >
            </div>
            <ul class="tag mtop-10">
              <li v-for="tag in datail.videoGroup" :key="tag.id">
                <button class="tag-btn">{{ tag.name }}</button>
              </li>
            </ul>
          </div>
        </div>
        <!-- 视频按钮 -->
        <div class="mtop-10">
          <button class="btn btn-white" @click="likeVideo">
            <i class="iconfont icon-good mright-5" :class="{icon_liked : countInfo.liked}"></i>
            <span>赞({{ countInfo.likedCount }})</span>
          </button>
          <button class="btn btn-white mleft-10" v-if="!subed"  @click="subVideo">
            <i class="el-icon-folder-add mright-5"></i>
            <span>收藏({{ datail.subscribeCount || datail.subCount }})</span>
          </button>
          <button class="btn btn-white mleft-10" v-else  @click="subVideo">
            <i class="el-icon-folder-checked mright-5"></i>
            <span>已收藏({{ datail.subscribeCount || datail.subCount }})</span>
          </button>
          <button class="btn btn-white mleft-10">
            <i class="iconfont icon-fenxiang mright-5"></i>
            <span>分享({{ datail.shareCount }})</span>
          </button>
        </div>
        <!-- 评论 -->
        <div class="comment-container">
          <div class="mbottom-10">
            <span class="font-bold font-20">评论</span>
            <span>({{ countInfo.commentCount }})</span>
          </div>
          <CommentList
            :hotCommentList="hotCommetList"
            :newCommentList="newCommentList"
            :id="id"
            :type="1"
            @getNew="getNewComment"
          ></CommentList>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="newParams.pageNo"
            :page-size="newParams.pageSize"
            layout="prev, pager, next"
            :total="total"
            align="center"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 右侧推荐区域 -->
    <div class="vd-right">
      <div class="tui-jian">
        <div class="font-bold mtop-10">相关推荐</div>
        <!-- 推荐列表 -->
        <ul class="xiang-guan mtop-10">
          <li v-for="(item, index) in relatedList" :key="index" class="mtop-10">
            <div class="xiang-guan-img">
              <img
                :src="relatedImgUrl(item)"
                @click="toVideoDetail(item)"
                class="img-h img pointer"
              />
            </div>
            <div class="xg-info mleft-10">
              <div
                class="mtop-10 font-14 title pointer"
                @click="toVideoDetail(item)"
              >
                {{ item.title || item.name }}
              </div>
              <div class="font-12 mtop-10 pointer" style="color: #9f9f9f">
                by{{ relatedListName(item) }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getMvDetail,
  getVideoUrl,
  getVideoInfo,
  getHotComment,
  getComment,
  getRelatedVideo,
  getRelatedMv,
  likeVideo ,
  subVideo
} from "@/api/request";
import CommentList from "@/components/list/commentList.vue";
import { mapState } from "vuex";
export default {
  components: { CommentList },
  data() {
    return {
      id: 0,
      type: "mv",
      datail: {},
      urlInfo: {},
      countInfo: {
        likedCount: 0,
        shareCount: 0,
        commentCount: 0,
        liked: false,
      },
      hotCommetList: [],
      newParams: {
        id: this.$route.params.id,
        type: 1,
        pageNo: 1,
        pageSize: 10,
        sortType: 3,
        cursor: 0,
      },
      newCommentList: [],
      total: 0,
      relatedList: [],
      subed: false
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.type = this.$route.params.type;
    this.newParams.type = this.resoureType;
    this.getMvDetail();
    this.getUrl();
    this.getVideoInfo();
    this.getHotComment();
    this.getNewComment();
    this.getRelatedVideo();
  },
  computed: {
    ...mapState(['isLogin']),
    title() {
      return this.type === "v" ? "视频详情" : "MV详情";
    },
    creator() {
      return this.type === "v"
        ? this.datail?.creator
        : this.datail?.artists?.[0];
    },
    avatarUrl() {
      return this.creator?.avatarUrl || this.creator?.img1v1Url;
    },
    nickName() {
      return this.creator?.nickName || this.creator?.name;
    },
    resoureType(){
      return this.type === 'v' ? 5 : 1;
    },
  },
  methods: {
    async getMvDetail() {
      const { data: res } = await getMvDetail(this.type, this.id);
      if (res.code !== 200) return;
      this.datail = res.data;
    },
    toVideo() {
      if (this.type === "v") this.$router.push("/video");
      else this.$router.push("/mv");
    },
    toUorADetail() {
      if (this.type === "v") {
        if (typeof this.creator?.uesrId !== "undefined")
          this.$router.push("/userdetail/" + this.creator.uesrId);
      } else {
        if (typeof this.creator?.id !== "undefined")
          this.$router.push("/artistdetail/" + this.creator.id);
      }
    },
    async getUrl() {
      const { data: res } = await getVideoUrl(this.type, this.id);
      if (res.code !== 200) return;
      if(this.type === 'v') this.urlInfo = Object.freeze(res.urls[0])
      else this.urlInfo = Object.freeze(res.data)
    },
    // 获取点赞评论
    async getVideoInfo() {
      const { data: res } = await getVideoInfo(this.type, this.id);
      if (res.code !== 200) return;
      this.countInfo = res;
    },
    // 获取热门评论
    async getHotComment() {
      const { data: res } = await getHotComment(this.id, this.resoureType, 5);
      if (res.code !== 200) return;
      this.hotCommetList = res.hotComments;
    },
    //获取最新评论
    async getNewComment() {
      console.log(this.newParams);
      const { data: res } = await getComment(this.newParams);
      if (res.code !== 200) return;
      this.newCommentList = res.data.comments;
      this.newParams.cursor = res.data.cursor;
      this.total = res.data.totalCount;
    },
    handleCurrentChange(val) {
      this.newParams.pageNo = val;
      this.$scrollTo();
      this.getNewComment();
    },
    // 相关视频
    async getRelatedVideo() {
      if (this.type === "v") {
        const { data: res } = await getRelatedVideo(this.type, this.id);
        if (res.code !== 200) return;
        this.relatedList = res.data;
      } else {
        const { data: res } = await getRelatedMv();
        if (res.code !== 200) return;
        this.relatedList = res.result;
      }
    },
    relatedImgUrl(item) {
      return item?.coverUrl || item?.picUrl;
    },
    toVideoDetail(item) {
      if (this.type === "v") {
        if (typeof item.vid !== "undefined")
          this.$router.push("/videodetail/v/" + item.vid);
        location.reload(true);
      } else {
        if (typeof item.id !== "undefined")
          this.$router.push("/videodetail/mv/" + item.id);
        location.reload(true);
      }
    },
    relatedListName(item) {
      return item?.creator?.[0].userName || item?.artists?.[0].name;
    },
    async likeVideo(){
      if(!this.isLogin) return this.$message.error('需要登录');
      let likeObj = {
        type:this.resoureType,
        t : this.countInfo.liked ? 0 : 1,
        id : this.id
      }
      const {data:res} = await likeVideo(likeObj);
      if(res.code !== 200) return;
      this.countInfo.liked = !this.countInfo.liked;
      if(this.countInfo.liked){
        this.countInfo.likedCount++;
      } else{
        this.countInfo.likedCount--;
      }
      // this.getVideoInfo();
    },
    async subVideo(){
      if(!this.isLogin) return this.$message.error('需要登录');
      let subObj = {
        type : this.type,
        id : this.id,
        t : this.subed ? 0 : 1
      }
      const  {data:res} = await subVideo(subObj);
      if(res.code !== 200) return;
      this.$message.success(this.subed ? '取消成功' : '收藏成功')
      this.subed = !this.subed;
    }
  },
};
</script>

<style lang="less" scoped>
.video-detail {
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
.vd-main {
  width: 600px;
}
.vd-right {
  width: 400px;
}
.video-container {
  .video-wrap {
    video {
      width: 600px;
      height: 340px;
    }
  }
}
.info-wrap {
  .creator-info {
    display: flex;
    margin: 10px auto;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .img-wrap {
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
      }
    }
    .sub-btn {
      outline: none;
      border: none;
      background-color: #fcf4f4;
      color: #ff3a3a;
      height: 30px;
      width: 80px;
      border-radius: 15px;
    }
  }
  .video-info {
    .tag {
      display: flex;
      flex-wrap: wrap;
      li {
        margin-right: 5px;
      }
      .tag-btn {
        outline: none;
        border: none;
        height: 20px;
        background-color: #f7f7f7;
        color: #363636;
        font-size: 12px;
        border-radius: 10px;
      }
    }
  }
}
.icon_liked{
  color: red;
}
.comment-container {
  margin-top: 20px;
}
.tui-jian {
  .xiang-guan {
    li {
      display: flex;
      .xiang-guan-img {
        width: 140px;
        img {
          border-radius: 4px;
        }
      }
      .title {
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }
}
</style>